<template>
  <div style="  vertical-align: top; height: 210px">
    <div style="height: 395px;overflow-y: auto">
      <n-space justify="center" style="margin-top: 15px">

        <n-popselect
          :options="fooocusUpscaleEngineTypeOptions"
          trigger="click"
          @update:value=" (key:any)  => { varyImage(item, key)}"
        >
          <n-button
            type="primary"
            :loading="item.varyLoading"
            block style="margin-top:5px;">扩散放大
          </n-button>
        </n-popselect>

        <n-popselect
          :options="fooocusVaryOptions"
          trigger="click"
          @update:value=" (key:any)  => { varyImage(item, key)}">
          <n-button
            type="primary"
            :loading="item.varyLoading"
            block
            style="margin-top:5px;"
          >图片变化
          </n-button>
        </n-popselect>

        <n-popselect
          :options="expandImageOption"
          trigger="click"
          @update:value="(key:any) => {
                             expandImage(item, key)
                          }">
          <n-button
            type="primary"
            :loading="item.expandLoding"
            block style="margin-top:5px;"
          >图片拓展
          </n-button>
        </n-popselect>

      </n-space>
    </div>

  </div>
</template>

<script setup lang="ts">
//@ts-ignore
import fileFunction from '@/libs/globalFunction/file.js'
import {computed, ref} from "vue";
import {NButton, NSelect, NSpace, useMessage} from 'naive-ui';
import {storyBoardController} from "@/api/controller/story/storyBoard.api";
import Bus from "@/components/file/box/GlobalUploader/utils/bus";
import {creatorDict} from "@/dictionary/creatorDict";
const {storyBoardSelectType,expandImageOption,fooocusVaryOptions,fooocusUpscaleEngineTypeOptions} = creatorDict()

const message = useMessage()

const inPaintStoryBoard = ref(null)

const props = defineProps({
  storyId:{
    type:String,
    require:true
  },
  row: {
    type: Object,
    default: () => {
      return {}
    }
  },
  characterOptions: {
    type: Array,
    default: () => {
      return []
    }
  },
  sceneOptions: {
    type: Array,
    default: () => {
      return []
    }
  },
  updateStoryBoardByNum:{
    type: Function,
    required: true
  },
  selectFunction: {
    type: Function,
    // required: true
    default: (fileId: string) => {

    }
  }
})

const varyImage = (row:any, varyType:string) =>{
  row.varyLoading = true
  const param = {
    uov_method: varyType,
    storyBoardId: row.id
  }
  storyBoardController.asyncFooocusVaryStoryBoardAndCheck(param, 10 * 1000 *60).then(res => {
    if (res.taskStatus === 'SUCCESS') {
      const imageFiles = res.userFileId.split(',')
      row.imageUrl = imageFiles[0]
      for (let i = 0; i < imageFiles.length; i++) {
        row.imageList.push(imageFiles[i])
      }
    }else {
      window.$notification.error({
        title: "请求异常:",
        content: res.failReason,
        duration: 5000,
        keepAliveOnHover: true
      })
    }
  }).finally(() => {
    row.varyLoading = false
  })
}



const expandImage = (row: any, expandDirection: string) => {
  row.expandLoding = true
  let expand = 'Top,Bottom'
  if (expandDirection=='HORIZONTAL'){
    expand = "Left,Right"
  }
  storyBoardController.asyncFooocusExpandStoryBoardAndCheck(expand,row.id, 10 * 1000 *60).then(res => {
    if (res.taskStatus === 'SUCCESS') {
      const imageFiles = res.userFileId.split(',')
      row.imageUrl = imageFiles[0]
      for (let i = 0; i < imageFiles.length; i++) {
        row.imageList.push(imageFiles[i])
      }
    }else {
      window.$notification.error({
        title: "请求异常:",
        content: res.failReason,
        duration: 5000,
        keepAliveOnHover: true
      })
    }
  }).finally(() => {
    row.expandLoding = false
  })
}

</script>

